<template>
  <div class="tagsclous">
    <h2>标签云</h2>
    <ul>
      <!-- <a href="" v-for="i in arr1" :key="i">向日葵</a> -->
      <a href="">向日葵</a>
      <a href="">浪漫</a>
      <a href="">社交</a>
      <a href="">拼搏</a>
      <a href="">秋天</a>
      <a href="">未来</a>
      <a href="">励志</a>
      <a href="">人生方向</a>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // arr1: [1, 2, 3, 4, 5, 6, 7],
    }
  }
}
</script>

<style lang="scss" scoped>
.tagsclous {
  border-radius: 8px;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  background: #fff;
  margin-bottom: 20px;
  h2 {
    padding: 20px;
    font-size: 18px;
  }
  ul {
    padding: 0 20px 20px 20px;
    overflow: hidden;
    a {
      display: inline-block;
      float: left;
      line-height: 34px;
      text-align: center;
      position: relative;
      color: #2c3e50;
      margin: 4px 5px;
      padding: 0 14px;
      border-radius: 3px;
      transition: 0.2s;
      opacity: 0.8;
    }
    a:hover {
      color: #000;
      opacity: 1;
    }
    a:nth-child(8n-7) {
      background: #def6ff;
    }
    a:nth-child(8n-6) {
      background: #f2fbf2;
    }
    a:nth-child(8n-5) {
      background: #f8f3fe;
    }
    a:nth-child(8n-4) {
      background: #fff7f0;
    }
    a:nth-child(8n-3) {
      background: #fff3f3;
    }
    a:nth-child(8n-2) {
      background: #edf9fe;
    }
    a:nth-child(8n-1) {
      background: #f1f3fd;
    }
    a:nth-child(8n) {
      background: #def6ff;
    }
  }
}
</style>
